<template>
	<view class="u-text-center">
		<!-- 标题 -->
		<view class="font-bold u-f-78">{{ lang_first.fouth_title }}</view>
		
		<!-- 提示 -->
		<view class="color-grew u-m-t-18">{{ lang_first.fouth_tips }}</view>
		
		<!-- 表单 -->
		<view class="u-m-t-44">
			<x-avatar
			selWidth="612upx" selHeight="612upx" @upload="myUpload" :avatar-src="showImage(value)"
			        avatarStyle="width: 612upx; height: 612upx; border-radius: 612upx;" inner="true"
					@fail="settingValue = 'camera'"></x-avatar>
		</view>
		
		<!-- 提交按钮 -->
		<view
		class="flex-center-center"
		style="margin-top: 174rpx">
			<x-common-btn
			width="590"
			height="102"
			@click="nextAction"
			>{{ lang_common.continue }}</x-common-btn>
		</view>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import { BASE_URL } from '@/config.js'
	import upload from '@/utils/upload.js'
	export default {
		props: {
			parentObj: {
				default: () => ({})
			}
		},
		data() {
			return {
				value: '',
				settingValue: ''
			}
		},
		watch: {
			parentObj: {
				handler(v) {
					console.log(v)
					this.value = v && v.avatar || ''
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			myUpload(res) {
				upload(({ filePath: res.path }), result => {
					if (result.status === 'complete') {
						this.value = result.msg.path
					}
				})
			},
			// 下一步
			nextAction() {
				if (!this.value) {
					this.$api.msg(this.lang_first.fouth_error)
					return
				}
				this.$emit('change', { avatar: this.value })
			}
		}
	}
</script>

<style scoped lang="scss">
	.sex-btn {
		
	}
</style>
